/**
 * @File   : ManageExam.js
 * @Author : xue.xiaoBing
 * @Date   : 2021/5/20
 * @Desc   : 管理课程
 **/

import React, {Component} from "react";
import {
  Button, Col, Divider, Row, Space, Input, Table,
  Breadcrumb, Tabs, Form, Upload, TreeSelect, Radio, Select
} from "antd";
import ImgCrop from 'antd-img-crop';
import {CKEditor} from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

import HomeHeader from "src/components/head/homeHeader/HomeHeader";
import TestImag from "src/assets/images/userLogo.jpg";


import "./ManageExam.sass";

const {TabPane} = Tabs;

const columns = [
  {
    align: 'center',
    title: '文件名称',
    dataIndex: 'name',
  },
  {
    title: '类型',
    align: 'center',
    dataIndex: 'type',
  },
  {
    align: 'center',
    title: '大小/时长',
    dataIndex: 'size',
  },
  {
    align: 'center',
    title: '上传时间',
    dataIndex: 'time',
  },
  {
    align: 'center',
    title: '转码状态',
    dataIndex: 'status',
  },
  {
    align: 'center',
    title: '操作',
    dataIndex: 'operation',
    render: () => <>
      <Button type={'link'}>查看</Button>
      <Button type={'link'} danger>删除</Button>
    </>,
  }
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    type: 'docx',
    size: `10${i}M`,
    time: '2021.05.25',
    status: '已转码'
  });
}


class ManageExam extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: null,
      loading: false,
      selectedRowKeys: [],
    }
  }

  start = () => {
    this.setState({loading: true});
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({selectedRowKeys});
  };

  render() {
    const {selectedRowKeys} = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    return (
      <div style={{backgroundColor: 'beige', minHeight: 'calc(100vh)'}} className={'manageExam'}>
        <div>
          <HomeHeader/>
        </div>
        <div style={{width: '70%', margin: '20px auto'}}>
          <Space direction={'vertical'} size={20}>
            <div style={{width: '100%'}}>
              <Breadcrumb>
                <Breadcrumb.Item>
                  <a href="/teach">在教课程</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>测试课程</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <Row style={{width: '100%', margin: '0px auto', boxShadow: '0 0 5px gray', borderRadius: '5px'}}>
              <Col span={24} style={{margin: ''}}>
                <div style={{
                  background: 'green',
                  width: '80px',
                  height: '35px',
                  lineHeight: '35px',
                  top: '5px',
                  zIndex: '100',
                  textAlign: 'center',
                  color: 'white',
                  borderTopRightRadius: '16px',
                  borderBottomRightRadius: '16px',
                  position: 'absolute'
                }}>
                  已发布
                </div>
                <Row style={{backgroundColor: 'white', height: '120px', width: '100%'}} align={'middle'}>
                  <Col span={5} style={{padding: '20px', width: '100%'}}>
                    <img src={TestImag} alt=""
                         style={{height: '80px', width: '100%', margin: '0 auto', borderRadius: '5px'}}/>
                  </Col>
                  <Col span={12}>
                    <Row align={'middle'}>
                      <Col span={12}>
                        <h2 style={{margin: '5px'}}>测试课程</h2>
                        <p style={{margin: '5px', color: '#43bc60'}}>免费</p>
                      </Col>
                      <Col span={12}>
                        <Row style={{float: 'right', width: '100%'}}>
                          <Col span={11} offset={1} style={{textAlign: 'center'}}>
                            <p style={{margin: '5px'}}>课程计划</p>
                            <p style={{margin: '5px', textAlign: 'center', color: '#43bc60'}}>12</p>
                          </Col>
                          <Col span={1}>
                            <Divider type="vertical"
                                     style={{width: '1px', height: '100%', backgroundColor: 'rgba(0,0,0,.5)'}}/>
                          </Col>
                          <Col span={11} style={{textAlign: 'center'}}>
                            <p style={{margin: '5px'}}>课程学员</p>
                            <p style={{margin: '5px', textAlign: 'center', color: '#43bc60'}}>20</p>
                          </Col>
                        </Row>
                      </Col>
                    </Row>
                  </Col>
                  <Col span={6}>
                    <Space style={{float: 'right'}}>
                      <Button style={{border: '1px solid #43bc60', color: '#43bc60'}} size={'large'}
                              href={'/exam/manageExam/1/1'}>管理课程</Button>
                      <Button size={'large'}>查看课程</Button>
                    </Space>
                  </Col>
                </Row>
              </Col>
            </Row>
            <div>
              <Tabs defaultActiveKey="1">
                <TabPane tab="课程信息" key="1">
                  <div style={{backgroundColor: 'white', minHeight: '400px', padding: '20px'}}>
                    <p>课程信息</p>
                    <Divider/>
                    <Form
                      labelCol={{
                        span: 4,
                      }}
                      wrapperCol={{
                        span: 16,
                      }}
                      layout="horizontal"
                    >
                      <Form.Item label="课程标题" name={'xx'} rules={[{required: true}]}>
                        <Input/>
                      </Form.Item>
                      <Form.Item label="课程副标题" name={'xx'}>
                        <Input.TextArea/>
                      </Form.Item>
                      <Form.Item label="标签">
                        <Select>
                          <Select.Option value="demo">Demo</Select.Option>
                        </Select>
                        <span style={{color: 'rgba(0,0,0,.5)', fontSize: 10}}>用于按标签搜索课程，相关课程的提取等。</span>
                      </Form.Item>
                      <Form.Item label="分类">
                        <Select>
                          <Select.Option value="demo">Demo</Select.Option>
                        </Select>
                      </Form.Item>
                      <Form.Item name="radio-group" label="连载状态">
                        <Radio.Group defaultValue={'a'}>
                          <Radio value="a">非连载课程</Radio>
                          <Radio value="b">更新中</Radio>
                          <Radio value="c">已完结</Radio>
                        </Radio.Group>
                      </Form.Item>
                      <Form.Item label="TreeSelect">
                        <TreeSelect
                          treeData={[
                            {
                              title: 'Light',
                              value: 'light',
                              children: [
                                {
                                  title: 'Bamboo',
                                  value: 'bamboo',
                                },
                              ],
                            },
                          ]}
                        />
                      </Form.Item>
                      <Form.Item label="封面图片">
                        <ImgCrop rotate>
                          <Upload
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            listType="picture-card"
                            style={{width: '200px !important'}}
                          >
                            {'封面图片'}
                          </Upload>
                        </ImgCrop>
                        <span style={{
                          color: 'rgba(0,0,0,.5)',
                          fontSize: 10
                        }}>请上传jpg,gif,png格式图片，建议图片尺寸480*270，建议图片大小不超过2MB。</span>
                      </Form.Item>
                      <Form.Item label="课程简介">
                        <CKEditor
                          editor={ClassicEditor}
                          style={{minHeight: '300px'}}
                          data="<br><br>"
                          onReady={editor => {
                            console.log('Editor is ready to use!', editor);
                          }}
                          onChange={(event, editor) => {
                            const data = editor.getData();
                            console.log({event, editor, data});
                          }}
                          onBlur={(event, editor) => {
                            console.log('Blur.', editor);
                          }}
                          onFocus={(event, editor) => {
                            console.log('Focus.', editor);
                          }}
                        />
                      </Form.Item>
                    </Form>
                  </div>
                </TabPane>
                <TabPane tab="课程设置" key="2">
                  <div style={{backgroundColor: 'white', minHeight: '400px', padding: '20px'}}
                       className={'courseSetting'}>
                    <Tabs tabPosition={'left'} style={{backgroundColor: 'white'}}>
                      <TabPane tab="基础设置" key="1">
                        <div style={{padding: '20px', backgroundColor: 'white'}}>
                          <p>基础设置</p>
                          <p style={{backgroundColor: 'gray', padding: '5px 15px'}}>营销设置</p>
                          <div style={{width: '100%'}}>
                            <Form
                              labelCol={{
                                span: 4,
                              }}
                              wrapperCol={{
                                span: 16,
                              }}
                              layout="horizontal"
                            >
                              <Form.Item label="价格" name={'xx'} rules={[{required: true}]}>
                                <Input prefix="￥" suffix="RMB"/>
                              </Form.Item>
                              <Form.Item name="radio-group" label="可加入">
                                <Radio.Group defaultValue={'1'}>
                                  <Radio value="1">可加入</Radio>
                                  <Radio value="2">不可加入</Radio>
                                </Radio.Group>
                              </Form.Item>
                              <Form.Item name="radio-group1" label="加入截至日期" rules={[{required: true}]}>
                                <Radio.Group defaultValue={'a'}>
                                  <Radio value="a">不限时间</Radio>
                                  <Radio value="b">自定义</Radio>
                                </Radio.Group>
                              </Form.Item>
                            </Form>
                          </div>
                          <p style={{backgroundColor: 'gray', padding: '5px 15px'}}>基础规则</p>
                          <div style={{width: '100%'}}>
                            <Form
                              labelCol={{
                                span: 4,
                              }}
                              wrapperCol={{
                                span: 16,
                              }}
                              layout="horizontal"
                            >
                              <Form.Item name="radio-group2" label="学习模式">
                                <Radio.Group defaultValue={'1'}>
                                  <Radio value="1">自由式</Radio>
                                  <Radio value="2">解锁式</Radio>
                                </Radio.Group>
                              </Form.Item>
                              <Form.Item name="radio-group3" label="学习有效期" rules={[{required: true}]}>
                                <Radio.Group defaultValue={'a'}>
                                  <Radio value="a">随到随学</Radio>
                                  <Radio value="b">固定周期</Radio>
                                  <Radio value="c">长期有效</Radio>
                                </Radio.Group>
                              </Form.Item>
                              <Form.Item name="radio-group4" label="上课提醒">
                                <p style={{margin: 0}}>未开启上课提醒 <Button type={'link'}>前往开启</Button></p>
                              </Form.Item>
                              <Form.Item name="radio-group2" label="任务完成规则">
                                <Radio.Group defaultValue={'1'}>
                                  <Radio value="1">无限制</Radio>
                                  <Radio value="2">由任务完成条件决定</Radio>
                                </Radio.Group>
                              </Form.Item>
                              <Form.Item wrapperCol={{offset: 4, span: 16}}>
                                <Button type="primary" htmlType="submit">
                                  保存
                                </Button>
                              </Form.Item>
                            </Form>
                          </div>
                        </div>
                      </TabPane>
                      <TabPane tab="课时管理" key="2">
                      </TabPane>
                      <Divider/>
                      <TabPane tab="教师管理" key="3">
                        Content of Tab 3
                      </TabPane>
                      <TabPane tab="学员管理" key="4">
                        Content of Tab 3
                      </TabPane>
                      <Divider/>
                      <TabPane tab="试卷批阅" key="5">
                        Content of Tab 3
                      </TabPane>
                      <TabPane tab="作业批阅" key="6">
                        Content of Tab 3
                      </TabPane>
                    </Tabs>
                  </div>
                </TabPane>
                <TabPane tab="文件管理" key="3">
                  <div style={{backgroundColor: 'white', minHeight: '400px', padding: '20px'}}>
                    <p>文件管理</p>
                    <div style={{
                      padding: '10px',
                      backgroundColor: 'rgba(0,0,0,.1)',
                      marginTop: '20px',
                      borderRadius: '5px'
                    }}>
                      <Space size={20}>
                        <Button type={'primary'}>上传资料</Button>
                        <Button>下载资料</Button>
                        <Button danger type={'outline'}>删除资料</Button>
                      </Space>
                    </div>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
                  </div>
                </TabPane>
                <TabPane tab="课程试卷" key="4">
                  <div style={{backgroundColor: 'white', minHeight: '400px', padding: '20px'}}>
                    课程试卷
                  </div>
                </TabPane>
              </Tabs>
            </div>
          </Space>
        </div>
      </div>
    )
  }
}

export default ManageExam